<template>
  <div class="tutorial">
    <h2>🌈 渐变过渡动画教程</h2>
    <p>使用 <code>&lt;transition&gt;</code> + CSS 渐变，实现优雅的淡入淡出与背景渐变。</p>

    <button class="btn" @click="show = !show">{{ show ? '隐藏' : '显示' }}示例</button>

    <transition name="fade-gradient">
      <div v-if="show" class="demo-box">
        渐变示例区域
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

<style scoped>
.tutorial { padding: 20px; }
.btn { padding:8px 12px; background:#6366f1; color:#fff; border:none; border-radius:6px; cursor:pointer; }
.btn:hover { background:#4f46e5; }
.demo-box {
  margin-top: 12px; padding: 20px; border-radius: 12px; color:#fff;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

/* 过渡定义 */
.fade-gradient-enter-active, .fade-gradient-leave-active {
  transition: opacity .35s ease, background .5s ease;
}
.fade-gradient-enter-from, .fade-gradient-leave-to { opacity: 0; }
.fade-gradient-enter-to, .fade-gradient-leave-from { opacity: 1; }

/* 背景在进入/离开时渐变变化 */
.fade-gradient-enter-from .demo-box,
.fade-gradient-leave-to .demo-box {
  background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 100%);
}
</style>